<template>
	<div>
		<ValidationProvider
			v-slot="{classes}"
			rules="required|odd"
			style="margin:20px">
			<Input
				v-model="value"
				@input="input"
				:placeholder="placeholder"
				:class="classes"/>
		</ValidationProvider>
		<Input v-model="placeholder"/>
	</div>
</template>

<script>
import ValidationProvider from '@/components/pc/validation-provider';
import Input from '@/components/pc/input';
import {required} from 'vee-validate/dist/rules';
import {extend} from 'vee-validate';

extend('required',{
	...required,
	message:'奥术大师大撒大所大所奥术大师大撒大所大所奥术大师大撒大所大所奥术大师大撒大所大所奥术大师大撒大所大所'
});
extend('odd',{
	validate(value){
		value=Number(value);
		if(isFinite(value)){
			return value%2===0;
		}
		return false;
	}
});

export default {
	name:'index',
	components:{
		ValidationProvider,
		Input,
	},
	data(){
		return {
			value:'',
			placeholder:'',
		};
	},
	created(){
	},
	methods:{
		input(val){
			console.log('input',val);
		}
	}
};
</script>

<style lang="scss">
.failed{
	$border-color:#d61010;
	$shadow-color:rgb(214, 16, 16, 0.2);
	&.lexmis-Input{
		&.lexmis--focus{
			>.lexmis_self{
				box-shadow:0 0 0 2px rgb(214,16,16,0.2);
			}
		}
		>.lexmis_self{
			border-color:#d61010 !important;
		}
	}
}
input{
	border:1px solid;
	&.failed{
		border-color:#d61010 !important;
	}
}
</style>
